<!-- 课程详情页 -->
<template>
  <div class="course-detail">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="">
      <ol class="">
        <li class="breadcrumb-item"><router-link to="/">首页></router-link></li>
        
      </ol>
    </nav>

    <!-- 课程内容容器 -->
    <div class="course-content">
      <!-- 左侧：课程图片 -->
      <div class="course-image-container">
        <img src="@/assets/background.jpg" alt="课程封面图" class="course-image" />
      </div>

      <!-- 右侧：课程信息 -->
      <div class="course-info-container">
        <!-- 课程标题和副标题 -->
        <div class="course-header">
          <h1>一元二次方程</h1>
          <p class="subtitle">适用于中小学生</p>
        </div>

        <!-- 课程价格信息 -->
        <div class="course-price">
          <p class="price-info">
            <span class="original-price">¥58</span>
            
          </p>
          <p class="coupon-info">
            <span>领券</span> 满99减20
          </p>
          <p class="integral-info">
            <span>积分</span> 购买可得50积分
          </p>
          <p class="service-info">
            <span>服务</span> 30天无忧退换货 48小时快速退款 满69元免邮费
          </p>
        </div>

        <!-- 选择颜色、尺寸、数量 -->
        <div class="course-options">
         
          <div class="option-group">
            <label>尺寸</label>
            <div class="option-items">
              <button 
                v-for="(size, index) in sizes" 
                :key="index" 
                @click="selectSize(index)"
                :class="{ 'selected': selectedSizeIndex === index }"
              >
                {{ size }}
              </button>
            </div>
          </div>
          <div class="option-group">
            <label>数量</label>
            <div class="quantity-selector">
              <button @click="decreaseQuantity">-</button>
              <input type="number" v-model="quantity" readonly>
              <button @click="increaseQuantity">+</button>
            </div>
          </div>
        </div>

        <!-- 操作按钮（立即购买、加入购物车） -->
        <div class="action-buttons">
         
          <button class="btn cart-btn" @click="$router.push('/checkout')">
  <i class="fas fa-shopping-cart"></i> 立即购买
</button>
         <button class="btn cart-btn" @click="$router.push('/shoppingcart')">
  <i class="fas fa-shopping-cart"></i> 加入购物车
</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      colors: [
        { name: '默认', image: require('@/assets/background.jpg') },
        // 可以添加更多颜色选项
      ],
      selectedIndex: 0,
      sizes: ['小', '中', '大', '特大'],
      selectedSizeIndex: 0,
      quantity: 1,
    };
  },
  methods: {
    selectColor(index) {
      this.selectedIndex = index;
    },
    selectSize(index) {
      this.selectedSizeIndex = index;
    },
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },
    increaseQuantity() {
      this.quantity++;
    },
  },
};
</script>
<style scoped>
.btn {
  display: inline-block;
  text-align: center;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* 立即购买按钮 */
.btn.buy-btn {
  background: #e74c3c;
  color: white;
  padding: 15px 30px;
  font-size: 18px;
}

.btn.buy-btn:hover {
  background: #c0392b;
}

/* 加入购物车按钮 */
.btn.cart-btn {
  background: #337ab7;
  color: white;
  padding: 15px 30px;
  font-size: 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn.cart-btn:hover {
  background: #286090;
}
.course-detail {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

.breadcrumb-nav {
  margin-bottom: 30px;
}

.breadcrumb {
  display: flex;
  gap: 10px;
  font-size: 16px;
}

.breadcrumb-item a {
  color: #337ab7;
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #666;
}

.course-content {
  display: flex;
  gap: 40px;
}

.course-image-container {
  flex: 1;
}

.course-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-info-container {
  flex: 2;
}

.course-header {
  text-align: left;
  margin-bottom: 20px;
}

.course-header h1 {
  font-size: 36px;
  color: #333;
  margin: 0;
}

/* 价格信息整体排版 */
.course-price .price-info {
  font-size: 32px; /* 放大字体 */
  color: red;       /* 设置为红色 */
  font-weight: bold;
  margin: 10px 0;
}

.course-header .subtitle {
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}

.course-price {
  background: #f5f5f5;
  padding: 20px;
  font-size: 32px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.course-price p {
  margin: 5px 0;
}

.course-price strong {
  color: red;
  font-size: 24px;
}

.course-options {
  margin-bottom: 20px;
}

.option-group {
  margin-bottom: 15px;
}

.option-items img {
  width: 50px;
  height: 50px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.option-items img.selected {
  border-color: red;
}

.option-items button {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  background: none;
  cursor: pointer;
}

.option-items button.selected {
  background: #f0f0f0;
}

.quantity-selector {
  display: flex;
  align-items: center;
}

.quantity-selector button {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  background: none;
  cursor: pointer;
}

.quantity-selector input {
  width: 50px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0 5px;
}

.action-buttons .btn {
  margin-right: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

.buy-btn {
  background: #e74c3c;
  color: white;
}

.buy-btn:hover {
  background: #c0392b;
}

.cart-btn {
  background: #337ab7;
  color: white;
}

.cart-btn:hover {
  background: #286090;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .course-content {
    flex-direction: column;
    gap: 20px;
  }

  .course-image {
    max-width: 100%;
  }

  .course-header h1 {
    font-size: 28px;
  }

  .course-header .subtitle {
    font-size: 14px;
  }

  .action-buttons .btn {
    padding: 10px 20px;
    font-size: 16px;
  }
}
</style>